// 源插件
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import { NumberDivide, DateDiff, FormatnumberZero, Mover, DateStamp } from '@/function.js';

// 视图插件
import {
  BackTop,
  Empty,
  Spin,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Upload,
} from 'antd';

// 外部组件
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Loading from '@/components/Loading/Loading';
import StandardTablePro from '@/components/UpgradeStandardTable/StandardTablePro';
import TimelineChartSeven from '@/components/Charts/TimelineChartSeven';

// css OR less预编译器
import $ from 'jquery';
import ReactKline from 'react-kline-pro';
import styles from './All.less';

// 图片

const Option = { Select };

/**
 *  Describe:数据连接
 *  Created by xjc on 2019/5/15
 */

@connect(({ etfGroup, loading }) => ({
  etfGroup,
  loading: loading.models.etfGroupRule,
}))
@Form.create()
class ETFGroup extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   *  Created by xjc on 2019/5/15
   */

  state = {
    listLoading: false, // 加载状态
    dataSourceHot: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceHistory: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceNormal: {
      data: [],
      total: [],
      code: 0,
    },
    modalVisible: false,
    chart: {},
    codes: '',
    Visible: false, // modal开关
    symbol: 'US.BABA',
  };

  nameModalOpen(record) {
    const that = this;
    const { dispatch } = this.props;
    dispatch({
      type: 'etfGroup/GetHistoryByType',
      payload: record.type,
      callback: res => {
        that.setState({
          codes: `${record.name} ${res.codes}`,
          chart: res.list,
          modalVisible: true,
        });
      },
    });
  }

  cancelHandle() {
    this.setState({
      modalVisible: false,
    });
  }

  klineModalOpen(value) {
    const that = this;
    that.setState({}, () => {
      $.ajax({
        type: 'GET',
        url: `http://fss.91stock.net/fss/Kline/GetStockInfo?code=${value}`,
        contentType: 'application/x-www-form-urlencoded;charset=utf-8',
        dataType: 'json',
        async: false,
        success(data) {
          if (data.myCode !== null) {
            that.setState({ Visible: true, symbol: data.myCode });
          } else {
            message.error('暂无该股票信息');
          }
        },
        error(e) {
          console.log(e);
        },
      });
    });
    // router.push('/Kline/Kline/:'+value)

    // this.setState({ Visible: true }, () => {       this.setState({ symbol: value });     });
  }

  klineModalClose() {
    this.setState({ Visible: false });
  }

  onRequestData(param, callback) {
    const that = this;
    $.ajax({
      type: 'GET',
      url: `http://fss.91stock.net/fss/Kline/GetKline?code=${param.symbol}`,
      contentType: 'application/x-www-form-urlencoded;charset=utf-8',
      dataType: 'json',
      async: true,
      success(data) {
        if (data.code === 1) {
          let dataCall = [];
          const coordinates = [];
          // debugger
          coordinates[0] = data.coordinates[data.coordinates.length - 1];
          dataCall = data.kline.data.item;
          callback({
            success: true,
            data: {
              lines: dataCall,
              monthCoordinates: data.monthCoordinates,
              coordinates,
              symbol: data.kline.data.symbol,
            },
          });
        }
      },
      error(e) {
        console.log(e);
      },
    });
  }

  addData() {
    const { dispatch } = this.props;
    const that = this;
    /* 导入列表数据 */
    /*    dispatch({
      type: 'etfGroup/GetHistory',
      callback: res => {
        const data = res.data;
        let dataSourceHistory = data.map(item => {
          return {
            ...item,
            codes: item.codes,
          };
        });
        that.setState({
          dataSourceHistory: {
            title: '资金流出',
            total: [],
            titleTotal: false,
            data: dataSourceHistory,
            code: res.code,
            columns: [
              {
                title: '板块',
                width: 100,
                dataIndex: 'industry',
                type: 'string',
                search: true,
                render: (value, row, index) => {
                  return (
                    <span
                      style={{ cursor: 'pointer' }}
                      onClick={this.nameModalOpen.bind(this, row)}
                    >
                      {value}
                    </span>
                  );
                },
              },
              {
                title: '行业',
                width: 100,
                dataIndex: 'name',
                type: 'string',
                search: true,
                render: (value, row, index) => {
                  return (
                    <span
                      style={{ cursor: 'pointer' }}
                      onClick={this.nameModalOpen.bind(this, row)}
                    >
                      {value}
                    </span>
                  );
                },
              },

              {
                title: '股票',
                width: 130,
                type: 'string',
                dataIndex: 'codeList',
                search: true,
                render: (value, row, index) => {
                  let list = [];
                  if (value) {
                    value.map(item => {
                      list.push(
                        <div
                          onClick={this.klineModalOpen.bind(this, item.code)}
                          style={{ cursor: 'pointer' }}
                        >
                          <span>{item.code + ' '}</span>
                          <span style={{ color: item.gain > 0 ? '#00aa33' : '#e3353f' }}>
                            {NumberDivide(mathService.mul(item.gain, 100), null, '%')}
                          </span>
                        </div>
                      );
                    });
                  }
                  return <div>{list}</div>;
                },
              },
              {
                title: '涨跌幅',
                width: 75,
                type: 'number',
                dataIndex: 'percent',
                sorter: true,
                render: (value, row, index) => {
                  let d = value > 0;
                  return (
                    <span style={{ color: d ? '#00aa33' : '#e3353f' }}>
                      {NumberDivide(mathService.mul(value, 100), null, '%')}
                    </span>
                  );
                },
              },
              {
                title: '相对强度',
                width: 75,
                type: 'number',
                dataIndex: 'relativeStrengthLine',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{NumberDivide(mathService.mul(value, 100), null, '%')}</span>;
                },
              },
              {
                title: '跑赢SPY比率(1周）',
                dataIndex: 'oneweek',
                type: 'number',
                width: 75,
                sorter: true,
              },
              {
                title: '跑赢SPY比率(2周）',
                dataIndex: 'twoweek',
                type: 'number',
                width: 75,
                sorter: true,
              },
              {
                title: '跑赢SPY比率(1月）',
                dataIndex: 'onemonth',
                type: 'number',
                width: 75,
                sorter: true,
              },
              {
                title: '跑赢SPY比率(3月）',
                align: 'center',
                type: 'number',
                dataIndex: 'threemonth',
                width: 75,
                sorter: true,
              },
              {
                title: '跑赢SPY比率(6月）',
                dataIndex: 'sixmonth',
                type: 'number',
                width: 75,
                sorter: true,
              },
              {
                title: '跑赢SPY比率(1年）',
                dataIndex: 'oneyear',
                type: 'number',
                width: 75,
                sorter: true,
              },
            ],
          },
        });
      },
    }); */
    dispatch({
      type: 'etfGroup/GetHot',
      callback: res => {
        const { data } = res;
        const dataSourceHot = data.map(item => {
          return {
            ...item,
            codes: item.codes,
          };
        });
        that.setState({
          dataSourceHot: {
            title: '资金流入',
            total: [],
            titleTotal: false,
            data: dataSourceHot,
            code: res.code,
            columns: [
              {
                title: '板块',
                width: 100,
                dataIndex: 'industry',
                type: 'string',
                search: true,
                render: (value, row, index) => {
                  return (
                    <span
                      style={{ cursor: 'pointer' }}
                      onClick={this.nameModalOpen.bind(this, row)}
                    >
                      {value}
                    </span>
                  );
                },
              },
              {
                title: '行业',
                width: 100,
                dataIndex: 'name',
                type: 'string',
                search: true,
                render: (value, row, index) => {
                  return (
                    <span
                      style={{ cursor: 'pointer' }}
                      onClick={this.nameModalOpen.bind(this, row)}
                    >
                      {value}
                    </span>
                  );
                },
              },

              {
                title: '股票',
                width: 130,
                type: 'string',
                dataIndex: 'codeList',
                render: (value, row, index) => {
                  const list = [];
                  if (value) {
                    value.map(item => {
                      list.push(
                        <div
                          onClick={this.klineModalOpen.bind(this, item.code)}
                          style={{ cursor: 'pointer' }}
                        >
                          <span>{`${item.code} `}</span>
                          <span style={{ color: item.gain > 0 ? '#00aa33' : '#e3353f' }}>
                            {NumberDivide(mathService.mul(item.gain, 100), null, '%')}
                          </span>
                        </div>
                      );
                    });
                  }
                  return <div>{list}</div>;
                },
              },
              {
                title: '涨跌幅',
                width: 75,
                type: 'number',
                dataIndex: 'percent',
                sorter: true,
                render: (value, row, index) => {
                  const d = value > 0;
                  return (
                    <span style={{ color: d ? '#00aa33' : '#e3353f' }}>
                      {NumberDivide(mathService.mul(value, 100), null, '%')}
                    </span>
                  );
                },
              },
              {
                title: '相对强度',
                width: 75,
                type: 'number',
                dataIndex: 'relativeStrengthLine',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{NumberDivide(mathService.mul(value, 100), null, '%')}</span>;
                },
              },
              {
                title: '跑赢SPY比率(1周）',
                dataIndex: 'oneweek',
                type: 'number',
                width: 75,
                sorter: true,
              },
              {
                title: '跑赢SPY比率(2周）',
                dataIndex: 'twoweek',
                type: 'number',
                width: 75,
                sorter: true,
              },
              {
                title: '跑赢SPY比率(1月）',
                dataIndex: 'onemonth',
                type: 'number',
                width: 75,
                sorter: true,
              },
              {
                title: '跑赢SPY比率(3月）',
                align: 'center',
                type: 'number',
                dataIndex: 'threemonth',
                width: 75,
                sorter: true,
              },
              {
                title: '跑赢SPY比率(6月）',
                dataIndex: 'sixmonth',
                type: 'number',
                width: 75,
                sorter: true,
              },
              {
                title: '跑赢SPY比率(1年）',
                dataIndex: 'oneyear',
                type: 'number',
                width: 75,
                sorter: true,
              },
            ],
          },
        });
      },
    });
    /* dispatch({
      type: 'etfGroup/GetNormal',
      callback: res => {
        const data = res.data;
        let dataSourceHot = data.map(item => {
          return {
            ...item,
            codes: item.codes,
          };
        });
        that.setState({
          dataSourceNormal: {
            title: '其他',
            total: [],
            titleTotal: false,
            data: dataSourceHot,
            code: res.code,
            columns: [
              {
                title: '板块',
                width: 100,
                dataIndex: 'industry',
                type: 'string',
                search: true,
                render: (value, row, index) => {
                  return (
                    <span
                      style={{ cursor: 'pointer' }}
                      onClick={this.nameModalOpen.bind(this, row)}
                    >
                      {value}
                    </span>
                  );
                },
              },
              {
                title: '行业',
                width: 100,
                dataIndex: 'name',
                type: 'string',
                search: true,
                render: (value, row, index) => {
                  return (
                    <span
                      style={{ cursor: 'pointer' }}
                      onClick={this.nameModalOpen.bind(this, row)}
                    >
                      {value}
                    </span>
                  );
                },
              },

              {
                title: '股票',
                width: 130,
                type: 'string',
                dataIndex: 'codeList',
                search: true,
                render: (value, row, index) => {
                  let list = [];
                  if (value) {
                    value.map(item => {
                      list.push(
                        <div
                          onClick={this.klineModalOpen.bind(this, item.code)}
                          style={{ cursor: 'pointer' }}
                        >
                          <span>{item.code + ' '}</span>
                          <span style={{ color: item.gain > 0 ? '#00aa33' : '#e3353f' }}>
                            {NumberDivide(mathService.mul(item.gain, 100), null, '%')}
                          </span>
                        </div>
                      );
                    });
                  }
                  return <div>{list}</div>;
                },
              },
              {
                title: '涨跌幅',
                width: 75,
                type: 'number',
                dataIndex: 'percent',
                sorter: true,
                render: (value, row, index) => {
                  let d = value > 0;
                  return (
                    <span style={{ color: d ? '#00aa33' : '#e3353f' }}>
                      {NumberDivide(mathService.mul(value, 100), null, '%')}
                    </span>
                  );
                },
              },
              {
                title: '相对强度',
                width: 75,
                type: 'number',
                dataIndex: 'relativeStrengthLine',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{NumberDivide(mathService.mul(value, 100), null, '%')}</span>;
                },
              },
              {
                title: '跑赢SPY比率(1周）',
                dataIndex: 'oneweek',
                type: 'number',
                width: 75,
                sorter: true,
              },
              {
                title: '跑赢SPY比率(2周）',
                dataIndex: 'twoweek',
                type: 'number',
                width: 75,
                sorter: true,
              },
              {
                title: '跑赢SPY比率(1月）',
                dataIndex: 'onemonth',
                type: 'number',
                width: 75,
                sorter: true,
              },
              {
                title: '跑赢SPY比率(3月）',
                align: 'center',
                type: 'number',
                dataIndex: 'threemonth',
                width: 75,
                sorter: true,
              },
              {
                title: '跑赢SPY比率(6月）',
                dataIndex: 'sixmonth',
                type: 'number',
                width: 75,
                sorter: true,
              },
              {
                title: '跑赢SPY比率(1年）',
                dataIndex: 'oneyear',
                type: 'number',
                width: 75,
                sorter: true,
              },
            ],
          },
        });
      },
    }); */
  }

  /**
   *  Describe:视图
   *  Created by xjc on 2019/5/15
   */

  render() {
    const { loading } = this.props;
    const {
      dataSourceHot,
      dataSourceHistory,
      dataSourceNormal,
      modalVisible,
      chart,
      codes,
      Visible,
    } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          <StandardTablePro dataSource={dataSourceHot} />
          {/* <br />
          <br />
          <StandardTablePro dataSource={dataSourceHistory} />
          <br />
          <br />
          <StandardTablePro dataSource={dataSourceNormal} /> */}
        </Card>
        <Modal
          destroyOnClose
          footer={null}
          visible={modalVisible}
          title={codes}
          width={document.body.clientWidth * 0.9}
          centered
          onOk={this.cancelHandle.bind(this)}
          onCancel={this.cancelHandle.bind(this)}
        >
          <TimelineChartSeven height={document.body.clientHeight * 0.8} data={chart} />
        </Modal>
        <Modal
          width="90%"
          // destroyOnClose
          title="K线"
          footer=""
          // destroyOnClose={true}

          visible={Visible}
          centered
          onOk={this.klineModalClose.bind(this)}
          onCancel={this.klineModalClose.bind(this)}
        >
          <ReactKline
            // width={600}
            // height={400}
            height={688}
            ranges={['1d']}
            symbol={this.state.symbol}
            symbolName={this.state.symbol}
            intervalTime={500000000}
            depthWidth={100}
            // debug={true}
            onRequestData={this.onRequestData.bind(this)}
          />
        </Modal>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    const that = this;
    this.addData();
    window.interval = setInterval(function() {
      message.success('ETF自选组合刷新');
      that.addData();
    }, 60000);
  }

  componentWillUnmount() {
    clearInterval(window.interval);
  }
}

export default ETFGroup;
